import React, { useState } from "react";
import { MyMack, MyNavBar } from "../../../components";
import style from "./style.module.scss";
import idCardFront from "../../../assets/images/image/hdpi/id_card_front.png";
import idCardBack from "../../../assets/images/image/hdpi/id_card_back.png";
import myIconCamera from "../../../assets/images/icon/common resource/hdpi/my_icon_camera_n.png";
import commonIconClose from "../../../assets/images/icon/common resource/hdpi/common_icon_close_n.png";
import { useNavigate } from "react-router-dom";

const Index: React.FC = () => {
  const navigate = useNavigate();

  const [isFlag, setIsFlag] = useState(false);

  return (
    <div className={style.realNameAuthentication}>
      <MyNavBar
        title="实名认证"
        style={{ backgroundColor: "#fff" }}
        onClickLeft={() => navigate("/set/person/infomation")}
      ></MyNavBar>
      <div className={style.realNameAuthentication_container}>
        <div>
          <div className={style.figure_box}>
            <img src={idCardFront} alt="" className={style.backgroundUrl} />
            <div className={style.uploadFigure}>
              <img src={myIconCamera} alt="" onClick={() => setIsFlag(true)} />
              <div>点击拍摄/上传人像面</div>
            </div>
            <img src={commonIconClose} alt="" className={style.closeIcon} />
          </div>
          <div className={style.emblem_box}>
            <img src={idCardBack} alt="" className={style.backgroundUrl} />
            <div className={style.uploadEmblem}>
              <img src={myIconCamera} alt="" onClick={() => setIsFlag(true)} />
              <div>点击拍摄/上传国徽面</div>
            </div>
            <img src={commonIconClose} alt="" className={style.closeIcon} />
          </div>
        </div>
        <button
          className={style.btn}
          onClick={() => navigate("/set/view/authentication/information")}
        >
          下一步
        </button>
        {/* 蒙层 */}
        {isFlag && (
          <MyMack
            onCancel={() => setIsFlag(false)}
            onConfirm={() => setIsFlag(false)}
          ></MyMack>
        )}
      </div>
    </div>
  );
};

export default Index;
